<template>
  <!-- 根组件 -->
  <div id="head">
    <!-- 右上角小图标组件外层 -->
    <van-cell is-link @click="showPopup">
      <template #icon>
        <!-- 右上角小图标 -->
        <img
          v-if="store.state.login.num == 1"
          src="../../assets/images/log30.png"
          alt=""
        />
        <router-link v-else to="/login"
          ><img
            src="https://img.taplb.com/md5/22/f1/22f1196f825298281376608459bfa7fe"
            alt=""
        /></router-link>
      </template>
    </van-cell>
    <!-- 弹出页面 -->
    <van-popup
      v-model:show="show"
      position="left"
      top="12px"
      :style="{ width: '330px' }"
    >
      <div class="popup-conent">
        <!-- 弹出页面的头部 -->
        <div class="popup-head">
          <!-- 头部左边 -->
          <div class="popup-head-left">
            <img src="../../assets/images/log80.png" alt="" />
            <p>霜星</p>
            <span>关注 2</span> <span>粉丝 2</span>
          </div>
          <!-- 头部右边 -->
          <div class="popup-head-right">
            <a href="#"></a>
          </div>
        </div>
        <!-- 弹出页面的列表 -->
        <van-cell-group :border="false">
          <router-link to="/condition"
            ><van-cell class="van-cell1" :border="false" title="动态"></van-cell
          ></router-link>
          <router-link to="/guanzhu"
            ><van-cell class="van-cell2" :border="false" title="关注"></van-cell
          ></router-link>
          <router-link to="/haoyou"
            ><van-cell class="van-cell3" :border="false" title="好友"></van-cell
          ></router-link>
          <router-link to="/shoucang"
            ><van-cell class="van-cell4" :border="false" title="收藏"></van-cell
          ></router-link>
          <router-link to="/dingdan"
            ><van-cell class="van-cell5" :border="false" title="订单"></van-cell
          ></router-link>
          <router-link to="/lishi"
            ><van-cell
              class="van-cell6"
              :border="false"
              title="浏览历史"
            ></van-cell
          ></router-link>
        </van-cell-group>
        <van-cell-group class="group2" :border="false">
          <router-link to="/zhoubian"
            ><van-cell
              class="van-cell7"
              :border="false"
              title="TAPTAO周边"
            ></van-cell
          ></router-link>
          <router-link to="/duihuan"
            ><van-cell
              class="van-cell8"
              :border="false"
              title="兑换中心"
            ></van-cell
          ></router-link>
          <router-link to="/jianyi"
            ><van-cell
              class="van-cell9"
              :border="false"
              title="建议和反馈"
            ></van-cell
          ></router-link>
          <router-link to="/shezhi"
            ><van-cell
              class="van-cell10"
              :border="false"
              title="设置"
            ></van-cell
          ></router-link>
          <router-link to="/moshi"
            ><van-cell
              class="van-cell11"
              :border="false"
              title="夜间模式"
            ></van-cell
          ></router-link>
          <router-link to="/banben"
            ><van-cell
              class="van-cell12"
              :border="false"
              title="当前版本 2.11.0-mkt.300011"
            ></van-cell
          ></router-link>
          <van-cell
              class="van-cell13"
              :border="false"
              title="退出登录"
              @click="qingchu"
            ></van-cell
          >
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const store = useStore();
    return {
      qingchu: () => {
        store.commit("login/qingchu"),window.location.reload();
      },
      show,
      showPopup,
      store,
    };
  },
};
</script>
<style lang="less">
.van-overlay {
  z-index: 999999999999;
}
#head {
  width: 30px;
  height: 30px;
  position: relative;
  .van-cell--clickable {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    img {
      width: 30px;
      height: 30px;
    }
    a {
      width: 30px;
      height: 30px;
    }
  }
  i {
    display: none;
    &::before {
      content: "";
    }
  }
  .popup-conent {
    width: 100%;
    height: 100%;
    .popup-head {
      width: 100%;
      height: 116px;
      background: url("../../assets/images/personage-bak.png") no-repeat;
      background-size: 100%;
      position: relative;
      .popup-head-left {
        position: absolute;
        top: 10px;
        left: 0;
        padding: 0px 20px;
        img {
          width: 60px;
          height: 60px;
          margin-bottom: 10px;
        }
        p {
          font-size: 13px;
          color: white;
          line-height: 5px;
        }
        span {
          font-size: 9px;
          color: white;
        }
      }
      .popup-head-right {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        right: 20px;
        a {
          display: block;
          width: 100%;
          height: 100%;
          background: url("../../assets/images/personal.png") no-repeat 0 -351px;
          background-size: 90%;
        }
      }
    }
    .van-cell-group {
      margin-top: 12px;
      font-size: 16px;
      font-weight: 600;
      .van-cell--borderless {
        span {
          &::before {
            content: "";
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 22px;
            background: url("../../assets/images/personal.png") no-repeat 0 0;
            background-size: 90%;
            vertical-align: middle;
          }
        }
      }
      .van-cell1 {
        span {
          &::before {
            background-position-y: -35px;
          }
        }
      }
      .van-cell2 {
        span {
          &::before {
            background-position-y: -71px;
          }
        }
      }
      .van-cell3 {
        span {
          &::before {
            background-position-y: -137px;
          }
        }
      }
      .van-cell4 {
        span {
          &::before {
            background-position-y: -116px;
          }
        }
      }
      .van-cell5 {
        span {
          &::before {
            background-position-y: -90px;
          }
        }
      }
      .van-cell6 {
        span {
          &::before {
            background-position-y: -54px;
          }
        }
      }
      .van-cell7 {
        span {
          &::before {
            background-position-y: -229px;
          }
        }
      }
      .van-cell8 {
        span {
          &::before {
            background-position-y: -211px;
          }
        }
      }
      .van-cell9 {
        span {
          &::before {
            background-position-y: -193px;
          }
        }
      }
      .van-cell10 {
        span {
          &::before {
            background-position-y: -249px;
          }
        }
      }
      .van-cell11 {
        span {
          &::before {
            background-position-y: -174px;
          }
        }
      }
      .van-cell12 {
        span {
          &::before {
            background-position-y: -154px;
          }
        }
      }
    }
  }
}
.van-popup--left {
  transform: translateZ(50%);
  height: 100%;
}
.group2 {
  padding-bottom: 80px;
}
</style>
